<template>
	<view class="actions" v-if="visible">
		<view class="mask" @click="visibleChange()"></view>
		<view class="tabBar">
			<view class="left">
				<text @click="visibleClose()">取消</text>
			</view>
			<view class="right">
				<text @click="visibleChange()">确认</text>
			</view>
		</view>
		<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange">
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
			</picker-view-column>
			<block v-if="type == 1">
				<picker-view-column>
					<view class="item" v-for="(item,index) in hours" :key="index">{{item}}点</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
			</block>
			<block v-else>
				<picker-view-column>
					<view class="item" v-for="(item,index) in timer" :key="index">{{item}}</view>
				</picker-view-column>
			</block>
		</picker-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: [0, 0, 0],
				days: [],
				hours: [],
				minutes: [],
				timer: ['0:00-1:00', '1:00-2:00', '2:00-3:00', '3:00-4:00', '4:00-5:00', '5:00-6:00', '6:00-7:00',
					'7:00-8:00', '8:00-9:00', '9:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00',
					'14:00-15:00','15:00-16:00','16:00-17:00', '17:00-18:00', '18:00-19:00', '19:00-20:00', '20:00-21:00', 
					'12:00-22:00', '22:00-23:00', '23:00-0:00',
				],
				indicatorStyle: `
					height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/60))}px;
					`
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			type: {
				type: Number,
				default: () => {
					return 2
				}
			}
		},
		created() {
			//初始化时间参数
			this.init();
		},
		watch:{
			visible(){
				this.init(0);
			}
		},
		methods: {
			init(e){
				//初始化时间段选择位置
				let time = new Date().getTime();
				for(let i=0;i<7;i++){
					if(i==0){
						this.days.push('今天');
					}else{
						this.days.push(this.date_time(time));
						time += 86400000;
					}
				}
				if(this.type == 1){
					for(let j=0;j<24;j++){
						this.hours.push(`${j}`)
					}
					for(let k=0;k<60;k++){
						this.minutes.push(`${k}`)
					}
					this.value[1] = new Date().getHours();
					this.value[2] = new Date().getMinutes();
				}else{
					this.value[1] = new Date().getHours();
				}
				if(e == 0){
					return
				}
				this.visibleChange();
			},
			visibleChange() {
				let obj = {
					day : this.days[this.value[0]]
				}
				if(this.type == 1){
					obj.hour = this.hours[this.value[1]]
					obj.minutes = this.minutes[this.value[2]]
				}else{
					obj.time = this.timer[this.value[1]]
				}
				this.$emit('change',obj)
			},
			visibleClose(){
				this.$emit('close','close')
			},
			bindChange({detail}) {
				if(this.type == 1){
					if(detail.value[0] == 0 && this.hours[detail.value[1]] < new Date().getHours()){
						this.$public.showToast('当前时间段已失效');
						this.value[1] = new Date().getHours();
						return
					}
					if(detail.value[0] == 0 && this.hours[detail.value[1]] <= new Date().getHours() && this.minutes[detail.value[2]] < new Date().getMinutes()){
						this.$public.showToast('当前时间段已失效');
						this.value[2] = new Date().getMinutes();
						return
					}
				}else{
					if(detail.value[0] == 0 && detail.value[1] < new Date().getHours()){
						this.$public.showToast('当前时间段已失效');
						this.value[1] = new Date().getHours();
						return
					}
				}
				this.value = detail.value;
			},
			date_time(timeStemp=new Date()){
				let date = new Date(timeStemp);
				return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
			}
		}
	}
</script>
<style lang="scss" scoped>
	.actions {
		width: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.1);
		bottom: 0;
		height: 100vh;
		z-index: 999;
	}

	.mask {
		width: 100%;
		height: calc(100vh - 640rpx);
	}

	.tabBar {
		width: 90%;
		padding: 2% 5%;
		background-color: #FFFFFF;
		display: flex;
		height: 40rpx;
		line-height: 40rpx;

		view {
			width: 50%;
		}

		.left {
			color: #14ADF9;
		}

		.right {
			text-align: right;
			color: #09BB07;
		}
	}

	picker-view {
		background-color: #FFFFFF;
		width: 100%;
		height: 600rpx;

		picker-view-column {
			width: 100%;
			text-align: center;
		}

	}
</style>
